<template>
	<view class="keyboard_card">
		<view class="keyboard_num">
			<view class="result">{{ result }}</view>
			<view class="calc">{{ calcProcess }}</view>
		</view>
		<view class="keyboard_list">
			<view class="keyboard_item" v-for="item in list" :key="item.value" :style="{
				gridRowStart: `span ${item.row ? item.row : 1}`,
				gridColumnStart: `span ${item.column ? item.column : 1}`,
				backgroundColor: `${item.bgColor ? item.bgColor : '#eee'}`,
				color: `${item.color ? item.color : ''}`
			}" @click="handleClick(item.value)">
				{{ item.value }}
			</view>
		</view>
	</view>
</template>

<script>
	import {formatExpression, calculate } from './cusMath.js'
	export default {
		name: "cusKeyboard",
		data() {
			return {
				calcProcess: '',
				result: '0.00',
				list: [
					{ value: 1 },
					{ value: 2 },
					{ value: 3 },
					{ value: "+" },
					{ value: 4 },
					{ value: 5 },
					{ value: 6 },
					{ value: "-" },
					{ value: 7 },
					{ value: 8 },
					{ value: 9 },
					{ value: '添加', row: 2, bgColor: '#01CD83', color: '#fff' },
					{ value: '.' },
					{ value: 0 },
					{ value: "删除" },
				]
			};
		},
		watch: {
			calcProcess(val) {
				// this.result = calculate(val)
				this.calcProcess = formatExpression(val)
				console.log("value", val)
				this.result = calculate(this.calcProcess).toFixed(2)
			}
		},
		methods: {
			handleClick(item) {
				if (item === '添加') {
				} else if (item === '删除') {
					this.calcProcess = this.calcProcess.slice(0, -1);
				} else {
					this.calcProcess += item;
				}
			},
		}
	}
</script>

<style lang="scss">
	.keyboard_card {
		.keyboard_num {
			color: #330;
			display: flex;
			gap: 20rpx;
			.result {
				width: max-content;
				color: #01CD83;
			}
			.calc {
				width: 0;
				flex-grow: 1;
				text-align: right;
				overflow-x: auto;
				white-space: nowrap;
			}
		}
		.keyboard_list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 10rpx;
			.keyboard_item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;
				border-radius: 10rpx;
				&:active {
					opacity: 0.6;
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
				}
			}
		}
	}
</style>
